I have the requirement that in a textbox a user can jump to the next word enclosed in [] on a tab out for example Hi [this] is [an] example. Testing [this] So when my cursor is at Hi and I do a tab out , the characters enclosed in the [this] are highlighted and when I again do a tabl out th next characters enclosed in following [an] are highlighted. This works fine

Now the requirement is whatever the text including the special chars between [] needs to be highlighted

case 1: when I have trailing ]]], it only highlights leading [[[ and ignores ]]]] e.g

case 2: In case of multiple trailing ] e.e [this]]]] is [test], ideally one a single tabl out from this , it should go to next text enclosed in [] but a user has to tab out 4 times one tab per training ] to go to next [text]

strong text The code is

$(document).ready(function() {
    $('textarea').highlightTextarea({
        color : '#0475D1',
        words : [ "/(\[.*?\])/g" ],
        textColor : '#000000'
    });
    $('textarea').live('keydown', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) {
            var currentIndex = getCaret($(this).get(0))
            selectText($(this), currentIndex);
            return false;
        }
    });
});

function selectText(element, currentIndex) {
    var rSearchTerm = new RegExp(/(\[.*?\])/);
    var ind = element.val().substr(currentIndex).search(rSearchTerm)
    currentIndex = (ind == -1 ? 0 : currentIndex);
    ind = (ind == -1 ? element.val().search(rSearchTerm) : ind);
    currentIndex = (ind == -1 ? 0 : currentIndex);
    var lasInd = (element.val().substr(currentIndex).search(rSearchTerm) == -1 ? 0
            : element.val().substr(currentIndex).indexOf(']'));
    var input = element.get(0);
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(ind + currentIndex, lasInd + 1 + currentIndex);
    } else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', lasInd + 1 + currentIndex);
        range.moveStart('character', ind + currentIndex);
        range.select();
    }
}

function getCaret(el) {
    if (el.selectionEnd) {
        return el.selectionEnd;
    } else if (document.selection) {
        el.focus();
        var r = document.selection.createRange();
        if (r == null) {
            return 0;
        }
        var re = el.createTextRange(), rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }
    return 0;
}

Please let me know to handle two above cases